<template>
  <div>
    <van-cell class="comment-item">
      <!-- <van-image slot="icon"
                 class="avatar"
                 round
                 fit="cover"
                 :src="comment.aut_photo" /> -->
      <van-image :src="comment.aut_photo"
                 class="avatar"
                 round
                 alt="" />
      <div class="title-wrap">
        <div class="user-name">用户名：{{comment.aut_name}}</div>
        <van-button class="like-btn "
                    :class="{ zan: comment.is_liking }"
                    size="mini"
                    round
                    :loading="commentLoading"
                    @click="onCommentLike"
                    :icon="comment.is_liking ? 'good-job':'good-job-o'"> {{ comment.like_count || '赞' }} </van-button>
      </div>

      <div>
        <div class="content">评论内容：{{ comment.content }}</div>
        <div class="bottm-info">
          <span class="comment-pubdate">{{ comment.pubdate | relativeTime  }}</span>
          <van-button size="mini"
                      class="peplt-btn"
                      @click="$emit('reply-click', comment)"
                      round>回复{{comment.reply_count}}</van-button>
        </div>
      </div>

    </van-cell>
  </div>
</template>

<script>
import { addCommentLike, deleteCommentLike } from '@/api/comment.js'
export default {
  name: 'CommentItem',
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      commentLoading: false
    }
  },
  methods: {
    async onCommentLike () {
      this.commentLoading = true
      try {
        if (this.comment.is_liking) {
          await deleteCommentLike(this.comment.com_id)
        } else {
          await addCommentLike(this.comment.com_id)
          this.comment.like_count++
        }
        this.comment.is_liking = !this.comment.is_liking
      } catch (err) {
        this.$toast('操作失败， 请重试！')
      }
      this.commentLoading = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .comment-item {
  position: relative;
  // background-color: pink;
  height: 300px;
  border-bottom: 1px solid #e6e6e6;
  .avatar {
    width: 100px;
  }
  .title-wrap {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .user-name {
      float: left;
      margin: 5px 0 0 118px;
    }
    .like-btn {
      float: right;
    }
  }
  /deep/ .content {
    background-color: #fff;
    position: absolute;
    top: 56px;
    left: 118px;
    width: 550px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }
  .bottm-info {
    position: absolute;
    bottom: 0;
    left: 0;
    .comment-pubdate {
      display: inline-block;
      margin: 0 50px 0 115px;
    }
  }
  /deep/.peplt-btn {
    margin-top: -30px !important;
  }
  .zan {
    color: #ee0a24;
  }
}
</style>
